<template>
  <div class="h-full flex flex-col">
    <a-card>
      <div slot="title">
        <a-space>
          <div class="ty"></div>
          {{ $t('app.setting.pagestyle') }}
        </a-space>
      </div>
      <div class="center">
        <div class="left">
          <img src="../../img/编组 3.png" alt="">
          <p>{{ $t('app.setting.pagestyle.light') }}</p>
        </div>
        <div class="right">
          <img src="../../img/编组.png" alt="">
          <p>{{ $t('app.setting.pagestyle.dark') }}</p>
        </div>
        <div class="bottom">
          <a-upload name="avatar" class="avatar-uploader" :show-upload-list="false" :customRequest="uploadImage">
            <a-button type="primary">
              <a-icon type="upload"/>
              {{ $t('app.setting.pagestyle.realdark') }}
            </a-button>
          </a-upload>
          <a-modal :centered="true" :visible="visible" @ok="handleOk" @cancel="handleCancel">
            <img src="../../img/编组1.png" alt="" class="img">
            <p style="margin-left:200px ; font-size: 18px;">{{
                $t('user.verification-code.required111566110577183')
              }}</p>
            <template #footer>
              <a-button id="button" key="submit" type="primary" :loading="loading" @click="handleOk">{{
                  $t('app.setting.themecolor.rr')
                }}
              </a-button>
            </template>
          </a-modal>
        </div>
        <p style="margin-left: 39%;">{{ $t('app.setting.themecolor') }}：xls;xlsx;csv</p>
      </div>
    </a-card>
  </div>
</template>
<script>
import axios from 'axios'
import storage from "store";
import {ACCESS_TOKEN} from "@/store/mutation-types";

export default {
  name: 'find',
  data() {
    return {
      visible: false,
      env: process.env.VUE_APP_BASE_API,
      loading: false,
    }
  },
  methods: {
    // 打开弹窗
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.visible = false;
    },
    toFinds(id) {
      this.$router.push({path: '/find/detail', query: {id}})
    },
    handleCancel(e) {
      // 取消关闭抽屉
      this.visible = false;
    },
    async uploadImage(e) {
      this.uploadLoading = true
      let formdata = new FormData()
      formdata.append('file', e.file)
      formdata.append('license', "LyogUEZHPk+V3+sRO+jt485oOja6aJg9ybPBR0MYsoFs9LN0QU5yVFoJLhs8pViQ")
      try {
        const {status, data} = await axios({
          url: `${this.env}/v1/discover/create`,
          method: 'post',
          data: formdata,
          headers: {
            token: storage.get(ACCESS_TOKEN),
            tokens:storage.get("bmwToken") || "",
          },
        })
        if (status == 200 && data.code == 1) {
          if (data.data != "") {
            this.toFinds(data.data)
          } else {
            this.showModal()
          }
        } else {
          this.$message.error(data.showMsg)
        }
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.uploadLoading = false
      }
    },
  }
}
</script>
<style lang="less" scoped>
.all {
  background-color: white;
  height: 100%;
}

.title {
  padding: 20px;
  background-color: rgb(247, 250, 255);
}

.img {
  margin: 30px auto;
}

.center {
  margin: 100px auto;
  width: 700px;
  height: 500px;
  opacity: 1;
  border: 1px dashed rgba(113, 152, 217, 1);
}

#button {
  margin-right: 190px;
  width: 100px;
}

.left {
  display: inline-block;
  margin: 100px 120px 70px 100px;
}

p {
  margin: 5px;
}

.right {
  display: inline-block;
  // margin: 100px 120px 70px 100px;
}

.bottom {
  margin-left: 270px;
}

img {
  width: 200px;
  height: 150px;

}

/deep/ .left[data-v-71537c96] {
  display: inline-block;
  margin: 99px 94px 70px 100px !important;
}
</style>